<template>
  <grid title="行为日志记录">
    <el-form inline
             style="width: 100%; text-align: left"
             label-width="60px"
             @submit.native.prevent="onSubmit"
             @reset.native.prevent="onReset"
             size="small">
      <el-col :md="24">
        <el-form-item label="用户名">
          <el-input v-model="query.name"
                    placeholder="请输入用户名"
                    clearable></el-input>
        </el-form-item>

        <el-form-item label="请求方式"
                      label-width="80px">
          <el-select v-model="query.method">
            <el-option label="GET"
                       value="GET"></el-option>
            <el-option label="POST"
                       value="POST"></el-option>
            <el-option label="PUT"
                       value="PUT"></el-option>
            <el-option label="DELETE"
                       value="DELETE"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="请求地址"
                      label-width="75px">
          <el-input v-model="query.path"
                    placeholder="例: api/v1/items"
                    clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :md="24">
        <el-form-item label="IP">
          <el-input v-model="query.ip"
                    placeholder="例: 192.168.1.1"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="请求时间"
                      label-width="80px">
          <el-date-picker v-model="query.start_time"
                          class="modify-input"
                          type="datetime"
                          size="mini"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择开始日期">
          </el-date-picker>
          -
          <el-date-picker v-model="query.end_time"
                          class="modify-input"
                          type="datetime"
                          size="mini"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     native-type="submit">筛选</el-button>
          <el-button native-type="reset">重置</el-button>
        </el-form-item>
      </el-col>
    </el-form>
    <el-table :data="behavior_list"
              border
              :resizable="false"
              stripe>
      <el-table-column type="expand">
        <template slot-scope="props">
          <div class="flex-pre"
               v-if="props.row.state">{{ props.row.states }}</div>
          <div class="flex-pre"
               v-if="props.row.agent">请求设备：{{ props.row.agent }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="user"
                       label="用户"
                       width="130px">
        <template slot-scope="scope">
          <user-popover :user="scope.row.user"
                        :nameRequire="true"></user-popover>
        </template>
      </el-table-column>
      <el-table-column prop="method"
                       label="请求方式">
      </el-table-column>
      <el-table-column prop="url"
                       label="请求路由">
      </el-table-column>
      <el-table-column prop="ip"
                       label="ip">
      </el-table-column>
      <el-table-column prop="created_at"
                       label="时间">
        <template slot-scope="scope">
          {{scope.row.time | timeFilter }}
        </template>
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="240">
        <template slot-scope="scope">
          <el-button type="primary"
                     size="small"
                     icon="el-icon-edit"
                     @click="editRow(scope.row.id)"></el-button>
          <el-button type="danger"
                     @click="deleteRow(scope.row.id)"
                     size="small"
                     icon="el-icon-delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="total, prev, pager, next"
                   background
                   @current-change="fetch"
                   :current-page.sync="query.page"
                   :page-size="query.limit"
                   hide-on-single-page
                   style="display: flex;justify-content: center;"
                   :total="behavior_total">
    </el-pagination>

  </grid>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import listMixin from '@/mixin/list'
import userPopover from '@/components/common/user-popover'

export default {
  title: '行为日志记录',
  data () {
    return {
      query: {
        limit: 12,
        page: 1,
        name: undefined,
        path: undefined,
        ip: undefined,
        method: undefined,
        start_time: undefined,
        end_time: undefined
      }
    }
  },
  mixins: [listMixin],
  components: {
    userPopover
  },
  async asyncData ({ store, route }) {
    const { query } = route;
    return store.dispatch('log/fetchBehaviorList', { page: 1, limit: 12 })
  },
  computed: {
    ...mapGetters('log', ['behavior_list', 'behavior_total'])
  },
  methods: {
    ...mapActions('log', ['fetchBehaviorList']),
    fetchList (params) {
      return this.fetchBehaviorList(params)
    },
    fetch () {
      this.fetchBehaviorList(this.query)
    }
  }
}
</script>
